<template>
	<view>
		<u-popup 
		@open="open"
		v-model="show" 
		@close="handleClose"
		mode="center" 
		width="600"
		:border-radius="20">
			<view class="" v-if="isModel == 1">
				<view class="content">
					<view class="top-img">
						<image class="image-block" :src="ImageUrl + '/1/logo.png'" mode=""></image>
					</view>
					<view class="foot">
						<view class="btn" @tap="handleConfirm">
							立即查看
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="isModel == 2">
				<view class="top">
					<view class="title">
						{{info.title}}
					</view>
				</view>
				<view class="content">
					<view class="name" v-if="info.isFuWen">
						<view class="" v-html="info.content"></view>
					</view>
					<view class="name" v-else>
						{{info.content}}
					</view>
					<view class="foot">
						<view class="btn" @tap="handleConfirm">
							{{info.btn}}
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="isModel == 3">
				<view class="top">
					<view class="title">
						{{info.title}}
					</view>
				</view>
				<view class="content">
					<view class="name">
						{{info.content}}
					</view>
					<view class="foot items-center justify-between">
						<view class="btn-1 btn-2" @tap="handleClose">
							{{info.btn}}
						</view>
						<view class="btn-1" @tap="handleRefund">
							{{info.btnTwo}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"model",
		props:{
			isModel:{
				type:String,
				default:'1'
			},
			info:{
				type:Object,
				default:()=>{
					return {
						title:'温馨提示',
						content:'此充电桩已被预约，换个桩试试吧',
						btn:'确定'
					}
				}
			}
		},
		data() {
			return {
				show:false,
				sexList:[{
					name:'男'
				},{
					name:'女'
				}],
				form:{},
				isSex:0
			};
		},
		methods:{
			handleClose(){
				this.show = false
			},
			handleYu(){
				this.show = false
				this.$parent.jqYuyueFn()
			},
			handleConfirm(){
				
				this.handleClose()
			},
			open(){
				this.show = true
			},
			handleSex(index){
				this.isSex = index
			},
			handleRefund(){
				this.$emit('refund')
				this.handleClose()
			},
			handleBin(){
				this.navTo('/pages/public/binding-card')
				this.handleClose()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 600rpx;
	}
	.top{
		width: 600rpx;
		position: relative;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		height: 130rpx;
		.image-bg{
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			top: -30rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		.title{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			line-height: 65rpx;
			text-align: center;
			padding-top: 50rpx;
		}
	}
	.content{
		width: 600rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;
		padding: 30rpx;
		.title{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			line-height: 65rpx;
			text-align: center;
		}
		
		.name{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 44rpx;
			text-align: center;
			max-height: 500rpx;
			overflow: auto;
		}
		.top-img{
			width: 445rpx;
			height: 270rpx;
			margin: 0 auto;
			.image-block{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.foot{
			margin-top: 30rpx;
			.btn{
				width: 400rpx;
				height: 94rpx;
				background: $uni-color-bg;
				border-radius: 47rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 94rpx;
				text-align: center;
				margin: 0 auto;
			}
			.btn-1{
				width: 250rpx;
				height: 80rpx;
				background: $uni-color-bg;
				border-radius: 40px;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
			.btn-2{
				border: 1rpx solid #2F9E25;
				background: #fff;
				color: #2F9E25;
			}
		}
	}
</style>